<template>
	<view>
		<!-- 头部导航 -->
		<view class="w-750 w-bj-white" style="position: fixed; top: 0; left: 0; z-index: 999;">
			<view class="h-100 w-row-justify-between-align">
				<view class="wh-80 w-row-center" @click="routerBack()">
					<image class="wh-40" src="@/static/gane/goBack-icon.png"></image>
				</view>
				<view class="w-350 h-100 w-row-center w-wz-conts font-36">
					<text>福利中心</text>
				</view>
				<view class="wh-80 w-row-center">
					<!-- <uni-datetime-picker type="datetimerange" @change="changeTiem">
						<image class="wh-50" src="../../../static/gane/rq.png"></image>
					</uni-datetime-picker> -->
				</view>
			</view>
		</view>
		<view class="bwh-120"></view>
		<!-- 头部导航结束 -->

		<view class="content-box padding-xs padding-top-sm">
			<view class="van-row van-row--justify-space-around">
				<view class="van-col van-col--23">
					<view class="padding-sm bg-white radius-default margin-bottom-sm">
						<view class="text-default  text-color-yellow line-height-sm">
							<span class="text-bold-lg">VIP保单计划 </span>
							<span class="fr text-sm text-color-grey disflex" @click="openTips">
								保单说明
								<image class="gzi" src="@/static/gane/gzi.png" mode=""></image>
							</span>

						</view>

						<view class="margin-top-sm line-height-sm">
							<view class="van-row">
								<view class="van-col van-col--16">
									当前保额:
									<span class="text-lg text-bold number-font">0.00</span>
								</view>
								<view class="van-col van-col--8">
									<button type="button"
									@click="openPrice()"
										class="van-button van-button--default van-button--mini van-button--round fr"
										style="color: white; background: rgb(25, 137, 250) !important; border-color: rgb(25, 137, 250); !important">
										<div class="van-button__content"><span class="van-button__text">立即购买</span>
										</div>
									</button>
								</view>
							</view>

							<view class="vip-progress-box" style="margin: 15px 0px 0px;">
								<div class="vip-progress-line">
									<div class="vip-progress-rate" style="width: 0%;"></div>
								</div>
							</view>
						</view>
					</view>
				</view>

				<view class="van-col van-col--11">
					<view class="padding-bottom-sm bg-white radius-default text-center">
						<view class="padding padding-bottom-0">
							<image src="@/static/mine/packet.png" mode="widthFix" class="full-width"></image>
						</view>
						<view class="text-bold-lg text-color-black margin-top-xs">
							VIP周红包
						</view>
						<view class="text-color-grey text-xs">
							每周六上午10:00可领
						</view>
						<button type="button" @click="receive(1)"
							class="van-button van-button--default van-button--mini van-button--round bg margin-top-xs">
							<div class="van-button__content"><span class="van-button__text">立即领取</span></div>
						</button>
					</view>
				</view>

				<view class="van-col van-col--11">
					<view class="padding-bottom-sm bg-white radius-default text-center">
						<view class="padding padding-bottom-0">
							<image src="@/static/mine/packet.png" mode="widthFix" class="full-width"></image>
						</view>
						<view class="text-bold-lg text-color-black margin-top-xs">
							VIP月红包
						</view>
						<view class="text-color-grey text-xs">
							每月28号上午10:00可领
						</view>
						<button type="button" @click="receive(2)"
							class="van-button van-button--default van-button--mini van-button--round bg margin-top-xs">
							<div class="van-button__content"><span class="van-button__text">立即领取</span></div>
						</button>
					</view>
				</view>
			</view>
		</view>

		<!-- 说明 -->
		<uni-popup ref="popup" type="bottom" border-radius="10px 10px 0 0">
			<view class="gameDetailBox">
				<view class="padding-sm">
					<view class=" padding-bottom-sm title">
						保单说明
						<div class="line-height-sm margin-top-sm">
							<p>VIP1 可购买5000-15000区间的金额，赔付比例1%</p>
							<p>VIP2可购买35000-50000区间的金额，赔付比例2%</p>
							<p>VIP3可购买50000-80000区间的金额，赔付比例3%</p>
							<p>VIP4可购买80000-110000区间的金额，赔付比例4%</p>
							<p>VIP5可购买110000-150000区间的金额，赔付比例5%</p>
							<p>VIP6可购买150000-200000区间的金额，赔付比例6%</p>
							<p>VIP7可购买200000-250000区间的金额，赔付比例7%</p>
							<p>VIP8可购买250000-300000区间的金额，赔付比例8%</p>
							<p>VIP9可购买300000-350000区间的金额，赔付比例9%</p>
							<p>VIP10可购买500000-1000000区间的金额，赔付比例10%</p>
							<p class="margin-top-xs">如您在每日下单前购买5000的保单金额，下单亏损后可返回50元保单金额，购买保单金额越大返回金额越多。</p>
							<p class="margin-top-xs">注：保单金额根据vip等级购买，等级越高购买金额越多。</p>
						</div>
						<image class="close-icon" src="@/static/index/close-icon.png" @click="closeTips()"></image>
					</view>
				</view>
			</view>
		</uni-popup>
		
		<uni-popup ref="pricePopup" type="bottom" border-radius="10px 10px 0 0">
			<view class="gameDetailBox padding-bot-0">
				<view class="padding-sm padding-top-sm">
					<view class=" title text-default text-bold text-color-black">
						购买保单
						<image class="close-icon" src="@/static/index/close-icon.png" @click="closePricePop()"></image>
					</view>
		
					<view class="van-cell van-field van-field--label-top margin-top">
						<view class="van-cell__title van-field__label van-field__label--top">
							<span>请输入购买金额</span>
						</view>
						<view class="van-cell__value van-field__value">
							<view class="van-field__body">
								<input type="text" inputmode="decimal" id="van-field-1-input" class="van-field__control"
									placeholder="最多可转入¥0.00" aria-labelledby="van-field-1-label" v-model="price">
							</view>
						</view>
					</view>
		
					<view class="van-row margin-top">
						<view class="van-col van-col--8" style="padding-right: 15rpx;">
							<button type="button"
								class="van-button van-button--primary van-button--normal van-button--plain van-button--block"
								style="color: rgb(25, 137, 250) !important; border-color: rgb(25, 137, 250) !important;">
								<div class="van-button__content"><span class="van-button__text">取消</span></div>
							</button>
						</view>
		
						<div class="van-col van-col--16" style="padding-left: 7.5px;"><button type="button"
								class="van-button van-button--primary van-button--normal van-button--block"
								:disabled="!price"
								:class="{'van-button--disabled': !price}"
								style="color: white; background: rgb(25, 137, 250) !important; border-color: rgb(25, 137, 250) !important;">
								<div class="van-button__content"><span class="van-button__text">确认转入</span></div>
							</button></div>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				price: null
			}
		},
		methods: {
			receive(type) {
				uni.showToast({
					title: '您还没有领取资格',
					icon: 'none'
				});
			},
			openTips(){
				this.$refs.popup.open()
			},
			closeTips(){
				this.$refs.popup.close()
			},
			
			openPrice(){
				this.$refs.pricePopup.open()
			},
			
			closePricePop(){
				this.$refs.pricePopup.close()
			}
		}
	}
</script>

<style scoped lang="scss">
	.w-row-center {
		color: #323233 !important;
	}

	.gzi {
		width: 24rpx;
		height: 24rpx;
		margin-left: 10rpx;
	}

	.vip-progress-box {
		position: relative;
		flex: 1 1;
		height: 3.2vw;
		margin: 0 2.13333vw;
		border-radius: 13.33333vw;
		overflow: hidden;
		transform: translateY(1px);

		.vip-progress-line {
			position: relative;
			width: 100%;
			height: 100%;
			background: #e8f5ff;

			.vip-progress-rate {
				position: absolute;
				top: 0;
				left: 0;
				width: 0;
				height: 100%;
				background-image: url('@/static/gane/vip-progress-rate.png');
				background-size: auto 100%;
				border-radius: 13.33333vw;
				animation: scrollBg 5s linear infinite;
			}
		}


	}

	.bg {
		background-image: linear-gradient(to right, #FFE88A, #FCCB14);
		border: 0;
		color: #fff;
		padding: 1.06667vw 4vw;
		font-weight: 700;
	}

	.gameDetailBox {
		background-color: #fff;
		font-size: 24rpx !important;
		color: #535d76;
		line-height: 50rpx;

		.title {
			position: relative;
			padding-right: 60rpx;

			.close-icon {
				width: 32rpx;
				height: 32rpx;
				position: absolute;
				top: 0;
				margin-top: 10rpx;
				right: 0;
			}
		}
	}
</style>